<template>
  <div class="app-container">
    <div class="linebtn" style="margin-top: 15px;">
      <div class="btn" @click="setIdx(0)" :class="idx == 0 ? 'select' : ''">活跃客户</div>
      <div class="btn" @click="setIdx(1)" :class="idx == 1 ? 'select' : ''">最新客户</div>
      <div class="btn" @click="setIdx(2)" :class="idx == 2 ? 'select' : ''">全部客户</div>
      <div class="btn" @click="setIdx(3)" :class="idx == 3 ? 'select' : ''">标签管理</div>
    </div>
    <!-- 主要是活跃客户、最新客户、全部客户 -->
    <all_customers v-show="idx!=3" :idx="idx"></all_customers>
    <!-- 主要标签管理 -->
    <tag v-show="idx==3"></tag>
  </div>
</template>
  
<script>
import tag from '../tag/index.vue'
import all_customers from '../components/icons/all_customers.vue';
export default {
  name: "WcGroupsInfo",
  dicts: ['sys_friend_proport'],
  components: {
    tag,all_customers
  },
  data() {
    return {
      idx: 0,
    };
  },
  methods: {
    setIdx(idx) {
      this.idx = idx
    }
  }
};

</script>
<style scoped lang="scss">
.app-container {
  background-color: #f6f9fb;

  .linebtn {
    display: flex;
    margin: -10px 0 10px 5px;
    height: 38px;

    .btn {
      width: 120px;
      text-align: center;
      line-height: 38px;
      font-size: 14px;
      color: #8c8c8c;
      margin-right: 10px;
      border: 1px solid #eaeff2;
      background-color: #fff;
      border-radius: 5px;

      .link-type {
        color: #8c8c8c;
      }
    }

    .select {
      background-color: #eaf6ff;
      border: 1px solid #288dfc;
      color: #288dfc;
      font-weight: 550;
    }
  }
}</style>